body { font-family: Georgia, 'Times New Roman', serif; background: #f9f8f5; }
.jspsych-display-element { background: #f9f8f5; }

.exp-container { max-width: 620px; margin: 0 auto; padding: 2rem 1.5rem; text-align: left; }
.exp-title  { font-size: 1.5rem; font-weight: normal; margin-bottom: 1.2rem; color: #1a1a1a; }
.exp-body   { font-size: 1rem; line-height: 1.85; color: #333; margin-bottom: 1.5rem; }

.vignette {
  background: #fff; border: 1px solid #e0ddd6; border-radius: 6px;
  padding: 1rem 1.25rem; font-size: 0.95rem; color: #444;
  line-height: 1.7; margin-bottom: 1.2rem; font-family: sans-serif;
}
.utterance {
  font-size: 1.15rem; font-style: italic; border-left: 3px solid #6366f1;
  padding-left: 1rem; margin: 1.2rem 0; color: #1a1a1a; line-height: 1.6;
}
.question-text { font-size: 1rem; color: #333; margin-bottom: 1rem; font-family: sans-serif; }
.rt-note { font-size: 0.72rem; color: #aaa; font-family: sans-serif; text-align: center; margin-top: 1rem; }

.progress-wrap { width: 100%; background: #e8e6e0; border-radius: 4px; height: 4px; margin-bottom: 2rem; overflow: hidden; }
.progress-fill { height: 100%; background: #6366f1; border-radius: 4px; transition: width 0.4s; }

.practice-tag {
  display: inline-block; background: #fef9c3; color: #854d0e;
  font-size: 0.72rem; font-family: sans-serif; padding: 3px 10px;
  border-radius: 20px; letter-spacing: 0.05em; margin-bottom: 1rem;
}

.jspsych-html-button-response-button button {
  font-family: sans-serif; font-size: 0.92rem; padding: 10px 28px;
  background: #fff; border: 1px solid #ccc; border-radius: 6px;
  color: #1a1a1a; cursor: pointer; margin: 0 6px;
  transition: background 0.12s, border-color 0.12s;
}
.jspsych-html-button-response-button button:hover { background: #f3f4f6; border-color: #999; }

.jspsych-survey-multi-choice-question label { font-family: sans-serif; font-size: 0.92rem; }
.jspsych-survey-multi-choice-text {
  font-family: Georgia, serif; font-size: 1rem;
  font-weight: normal; color: #1a1a1a; margin-bottom: 0.75rem;
}